<template>
    <el-dialog title="规格选择" v-model="dialogVisibe" width="80%" top="5vh">
        <div class="common-layout">
            <el-container style="height: 65vh;">
                <el-aside width="220px" class="image-aside">
                    <div class="top">
                        <!-- {{tableData}} -->
                        <div class="sku-list" :class="{ 'active': (activeId == item.id) }" v-for="(item, index) in tableData "
                            :key='index' @click="handleChangeActiveId(item.id)">
                            {{ item.name }}
                        </div>
                    </div>
                    <div class="bottom"> <!-- 分页区域 -->
                        <div class="bottom">
                            <el-pagination background layout="prev, next" :total="total" :current-page="currentPage"
                                :page-size="limit" @current-change="getData" />
                        </div>
                    </div>
                </el-aside>
                <el-main>
                    <el-checkbox-group v-model="form.list">
                        <el-checkbox v-for="item in list" :key="item" :label="item" border>
                            {{ item }}
                        </el-checkbox>
                    </el-checkbox-group>

                </el-main>
            </el-container>
        </div>
        <template #footer>
            <span>
                <el-button @click="dialogVisibe = false">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, reactive } from "vue"
import {
    getSkusList,

} from '~/api/skus.js'
import {
    useInitTable,
} from '~/composables/useCommon.js'

const form = reactive({
    name:"",
    list: []
})
const activeId = ref(0)
const {
    total,
    currentPage,
    limit,
    getData,
    tableData,
} = useInitTable({
    getList: getSkusList,
    onGetListSuccess:(res) =>{
        tableData.value = res.list
        total.value = res.totalCount
        if(tableData.value.length>0){
            handleChangeActiveId(tableData.value[0].id)
        }
    }
})
const dialogVisibe = ref(false)

const callbackFunction = ref(null)
const open = (callback = null) => {
    // console.log(ballback);
    callbackFunction.value = callback
    getData(1)
    dialogVisibe.value = true
}
const list = ref([]);
function handleChangeActiveId (id)  {
    list.value = []
    activeId.value = id
    let item = tableData.value.find(o => o.id == id)
    if (item) {
        list.value = item.default.split(",")
        form.name = item.name
    }
}
const submit = () => {
    // console.log(typeof callbackFunction);
    if(typeof callbackFunction.value === 'function'){
        callbackFunction.value(form)
    }
    dialogVisibe.value = false
}
defineExpose({
    open
})
</script>
<style>
.image-aside {
    border-right: 1px solid #eeeeee;
    position: relative;
}

.image-aside .top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    /* 超出的部分自动滚动 */
    overflow: auto;
}

.image-aside .bottom {
    position: absolute;
    bottom: 0;
    height: 50px;
    left: 0;
    right: 0;
    @apply flex items-center justify-center;
}

.sku-list {
    border-bottom: 1px solid #f4f4f4;
    @apply p-3 text-sm text-gray-600 flex items-center cursor-pointer;
}

.sku-list:hover,
active {
    @apply bg-pink-50;
}</style>